<template>
  <div class="footer">
    <!-- <div class="company-intro">
      <div class="logo">
        <img src="~assets/image/layout/logo_2025.png" alt />
      </div>
      <ul>
        <li class="intro-item">
          <img src="~assets/image/layout/sanjiao.png" alt /> 武汉纺友是央企国机集团旗下的互联网+高新技术企业
        </li>
        <li class="intro-item">
          <img src="~assets/image/layout/sanjiao.png" alt /> 致力于用IT技术和虚拟仿真技术帮助更多企业数字化转型
        </li>
      </ul>
    </div> -->
    <div class="aboutus">
      <div class="zizhi">
        <!-- <div class="title">荣誉资质</div>
        <div class="swiper-container ft_swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in honner" :key="index">
              <img :src="item.img" alt />
              <p class="text-one">{{ item.name }}</p>
            </div>
          </div>
        </div> -->
        <ul class="honner">
          <li class="honnerItem" v-for="(item, index) in honner" :key="index">
            <img :src="item.img" alt />
            <p class="text-one">{{ item.name }}</p>
          </li>
        </ul>
        <div class="products">
          <p>产品与服务</p>
          <ul class="products-content">
            <li v-for="(item, index) in products" :key="index">{{ item.name }}</li>
          </ul>
        </div>

        <div class="phone">电话咨询：13377877786（微信同号）</div>
        <!-- <div class="contactInfo">
          <div class="title">联系我们</div>
          <div class="contact-info-item">
            <img src="~assets/image/layout/dizhi.png" alt />
            <div class="contact-info-item-content">地址：湖北省武汉市洪山区珞喻路 889-1 号融众国际 18 楼</div>
          </div>
          <div class="contact-info-item line-2">
            <img src="~assets/image/layout/dianhua1.png" alt />
            <div class="contact-info-item-content">
              微电 :
              <a href="tel:177-4050-2025"> 177-4050-2025（夏沫）<i class="kefu iconfont icon-kefu1"></i> </a>
              <br />
              <a href="tel:133-7787-7786">
                <i style="visibility: hidden;">微电 :</i>133-7787-7786（王芳）<i class="kefu iconfont icon-kefu1"></i>
              </a>
            </div>
          </div>
          <div class="contact-info-item">
            <img src="~assets/image/layout/x13.png" alt />
            <div class="contact-info-item-content">QQ：318 616 9641</div>
          </div>
          <div class="contact-info-item">
            <img src="~assets/image/layout/youxiang1.png" alt />
            <div class="contact-info-item-content">邮箱 : vr@2025.net</div>
          </div>
        </div> -->
        <!-- <div class="fask-nav">
          <a href="https://www.2025.net/zhongzhi/number.html" target="_blank">数字孪生</a>
          <a href="https://www.2025.net/zhongzhi/ysfw.html" target="_blank">影视服务</a>
          <a href="https://www.2025.net/zhongzhi/declare.html" target="_blank">金课申报</a>
          <a href="https://www.2025.net/zhongzhi/aboutus.html" target="_blank">关于我们</a>
          <a href="https://www.2025.net/zhongzhi/xmt.html" target="_blank">新媒体运营</a>
          <a href="https://www.2025.net/zhongzhi/riskmanage.html" target="_blank">内控软件</a>
          <a href="https://www.2025.net/zhongzhi/ydd.html" target="_blank">小程序定制</a>
        </div> -->
        <div class="more-info clearfix">
          <div class="followus fl">
            <div class="title">关注我们</div>
            <ul>
              <li>
                <img src="~assets/image/layout/QRcode01.png" alt />
                <p>关注纺友网</p>
              </li>
              <li>
                <img src="~assets/image/layout/QRcode02.png" alt />
                <p>关注中国纺机网</p>
              </li>
              <li>
                <img src="~assets/image/layout/QRcode03.png" alt />
                <p>数智纺小程序</p>
              </li>
              <li>
                <a class="phoneCall"  href="tel:13377877786">
                  <img src="~assets/image/layout/iphone.png" alt />
                </a>
                
              </li>
            </ul>
          </div>
          <!-- <div class="nav-71 fl">
            <div class="title">更多服务</div>
            <a id="yun-71" class="yun-logo-wrapper" href="https://m.71ydj.com" target="_blank"></a>
          </div> -->
        </div>

        <ul class="record">
          <li>Copyright © 纺友技术有限公司</li>
          <li>版权所有 ICP证：鄂ICP备09014919号-19</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- <div class="footer-layout">
    <div class="footer-main">
      <div class="footer-swiper">
        <div class="swiper-container ft_swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in honner" :key="index">
              <img :src="item.img" alt="" />
              <p class="text1">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-contact">
        <h1>联系我们</h1>
        <p>地址：湖北省武汉市洪山区珞喻路889-1-融众国际18楼</p>
        <p>电话：177-4050-2025 / 133-7787-7786</p>
        <p>Q Q：259 259 2025</p>
        <p>邮箱：vr@2025.net</p>
      </div>
    </div>
  </div>-->
</template>
<script>
import Swiper from 'swiper'
import { submitApi } from 'api/user.js'
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      honner: [
        {
          name: '高新技术企业证书',
          img: require('assets/image/cloud/honner3.jpg')
        },
        // {
        //   name: 'ICP证书',
        //   img: require('assets/image/cloud/honner3.jpg')
        // },
        {
          name: 'ICP证书',
          img: require('assets/image/cloud/honner5.jpg')
        },
        {
          name: '软件产品证书',
          img: require('assets/image/cloud/honner8.jpg')
        },
        // {
        //   name: '信息安全管理体系认证证书',
        //   img: require('assets/image/cloud/honner8.jpg')
        // },
        {
          name: '高新技术企业证书',
          img: require('assets/image/cloud/honner3.jpg')
        }
        // {
        //   name: '信息技术服务管理体系认证证书',
        //   img: require('assets/image/cloud/honner10.png')
        // }
      ],
      products: [
        {
          name: 'MES/MOM'
        },
        {
          name: 'WMS'
        },
        {
          name: '智慧配棉'
        },
        {
          name: 'ERP'
        },
        {
          name: '可视化系统'
        },
        {
          name: '纺智云'
        }
      ],
      addForm: {
        name: '',
        phone: ''
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper('.ft_swiper', {
        slidesPerView: 4,
        spaceBetween: 5,
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }
      })
    })
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    },
    submitForm() {
      if (this.addForm.name.length && this.addForm.phone.length) {
        submitApi(this.addForm).then(res => {
          if (res.code === 0) {
            this.$notify({ type: 'success', message: '您的信息已提交，我们会尽快与您取得联系!' })
          } else {
            this.$notify({ type: 'warning', message: res.message })
          }
        })
      } else {
        this.$notify({ type: 'warning', message: '请将信息填写完整!' })
      }
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
.footer {
  height: 940px;
  // padding-top: 120px;
  box-sizing: border-box;
  background-color: rgba(30, 42, 56, 1);
  // background: linear-gradient(
  //   rgba(255, 255, 255, 1) 0,
  //   rgba(255, 255, 255, 1) 140px,
  //   rgba(2, 90, 250, 1) 140px,
  //   rgba(2, 90, 250, 1) 100%
  // );
  // overflow-x: hidden;
  margin-bottom: 70px;
  // position: absolute;
  // top: 0px;
  // left: 0px;

  .aboutus {
    box-sizing: border-box;
    padding: 0px 28px;
    // padding: 39px 28px;
    overflow: hidden;
    .logo {
      display: flex;
      align-items: baseline;
      margin-bottom: 52px;
      .gj {
        display: block;
        width: 114px;
        height: 76px;
      }
      span {
        line-height: 32px;
        font-size: 22px;
        font-weight: 500;
        color: #fff;
      }
    }
    .title {
      font-size: 30px;
      line-height: 30px;
      margin-bottom: 37px;
      font-weight: 500;
      color: #fff;
    }
    .zizhi {
      overflow: hidden;
      // padding-bottom: 57px;
      .honner {
        width: 100%;
        height: 211px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 2px solid #0b131b;

        & > li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &:nth-child(1) {
            & > img {
              width: 143px;
              height: 92px;
            }
          }
          &:nth-child(2) {
            & > img {
              width: 67px;
              height: 92px;
            }
          }
          &:nth-child(3) {
            & > img {
              width: 126px;
              height: 92px;
            }
          }
          &:nth-child(4) {
            & > img {
              width: 143px;
              height: 92px;
            }
          }
          & > p {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-top: 15px;
            box-sizing: border-box;
          }
        }
      }
      .products {
        padding-top: 40px;
        box-sizing: border-box;
        & > p {
          font-size: 28px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #64707e;
          text-align: left;
        }
        .products-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          & > li {
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            box-sizing: border-box;
            width: 120px;
            text-align: left;
            margin-top: 20px;
            &:nth-child(2),
            &:nth-child(5) {
              margin-left: 160px;
              margin-right: 160px;
            }
          }
        }
      }
      .phone {
        width: 100%;
        height: 68px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-sizing: border-box;
        margin-top: 61px;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        line-height: 68px;
      }

      .record {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 107px;
        box-sizing: border-box;
        margin-top: 44px;
        background-color: rgba(24, 35, 48, 1);
        padding: 0px;
        & > li {
          font-size: 22px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #444f5d;
          line-height: 36px;
        }
      }
    }

    // .fask-nav {
    //   margin-bottom: 32px;
    //   a {
    //     display: inline-block;
    //     margin-right: 16px;
    //     color: #fff;
    //     font-size: 28px;
    //     text-decoration: underline;
    //   }
    // }

    .followus {
      overflow: hidden;
      box-sizing: border-box;
      margin-top: 54px;
      width: 100%;
      .title {
        margin-bottom: 35px;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #64707e;
      }
      ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          // margin-right: 55px;
          img {
            width: 117px;
            height: 117px;
            margin-bottom: 15px;
          }
          p {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
          &:nth-child(4) {
            .phoneCall{
              width: 89px;
              height: 89px;
              & > img {
              width: 89px;
              height: 89px;
              align-items: flex-start;
              }
            }
          }
        }
      }
    }
    .yun-logo-wrapper {
      display: block;
      width: 203px;
      height: 74px;
      background: url('~assets/image/layout/logo_71yun.png') no-repeat center;
      background-size: 165px 45px;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
  }
  .copyright {
    width: 100%;
    height: 63px;
    line-height: 63px;
    background: rgba(32, 41, 58, 1);
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: rgba(151, 151, 151, 1);
  }
}

.footer-form {
  width: 684px;
  height: 380px;
  position: relative;
  top: -100px;
  padding: 35px 40px;
  box-sizing: border-box;
  background: #283345;
  /*background: #025afa;*/
  border-radius: 10px;
  color: white;
  .form-submit {
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 35px;
    background: rgba($color: #fff, $alpha: 0.6);
    font-size: 24px;
  }
  .form-itme {
    margin-bottom: 40px;

    font-size: 24px;
    p {
      margin-bottom: 10px;
    }
    .form-input {
      width: 100%;
      height: 44px;
      display: block;
      border: 0;
      border-bottom: 1px solid rgba($color: #fff, $alpha: 0.8);
      color: white;
      &::placeholder {
        color: rgba($color: #fff, $alpha: 0.6);
      }
    }
  }
}

.company-intro {
  width: 100%;
  height: 330px;
  padding: 40px 32px 0;
  box-sizing: border-box;
  background: url('~assets/image/layout/bg_address.jpg') no-repeat center;
  background-size: cover;
  font-size: 26px;
  line-height: 48px;
  color: #fff;
  .logo {
    width: 235px;
    height: 62px;
    margin-bottom: 70px;
    img {
      width: 100%;
    }
  }
  .intro-item {
    img {
      width: 14px;
      height: 16px;
      vertical-align: middle;
    }
  }
}

.footer-layout {
  position: relative;
  background: #283345;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;

  .footer-main {
    height: 100%;
    padding: 245px 0 52px;
    box-sizing: border-box;
    .footer-swiper {
      height: 140px;
    }
    .footer-contact {
      margin-top: 55px;
      h1 {
        font-size: 30px;
        color: white;
        margin-bottom: 35px;
      }
      p {
        font-size: 24px;
        color: rgba($color: #fff, $alpha: 0.6);
        margin-bottom: 27px;
      }
    }
  }
}
.ft_swiper {
  width: 100%;

  .swiper-slide {
    img {
      height: 98px;
      display: block;
      margin: 0 auto 16px;
      margin-bottom: 16px;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      color: rgba(151, 151, 151, 1);
      text-align: center;
    }
  }
}
</style>
